<html>

<head>
    <title>022 | User stream | J3D</title>

    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

    <link rel="stylesheet" href="../demo/common/common.css"/>
    <script type="text/javascript" src="../demo/common/common.js"></script>

    <script type="text/javascript" src="../build/j3d.js"></script>
    <script type="text/javascript" src="../ext/UserStream.js"></script>

    <script>

        var engine, ctex, post;
        var mx = 0, my = 0;
        var postshader;

        window.onload = function() {
            if (!checkWebGL())
                return;

            engine = new J3D.Engine();
            J3D.Loader.loadGLSL("shaders/VideoEffect.glsl", setupScene);
        }

        function setupScene(p) {
            postshader = p;
            webcam = new UserStream(onUserStream);
        }

        function onUserStream() {
            ctex = new J3D.Texture(webcam.output);

            postshader.colorOffset = [0.0, 0.0, 0.0];

            post = new J3D.Postprocess(engine);
            post.filter = postshader;
            post.render = function() {
                J3D.Time.tick();
                ctex.update();
                this.renderEffect(ctex.tex);
            }

            document.onmousemove = onMouseMove;

            draw();
        }

        function onMouseMove(e) {
            mx = ( e.clientX / window.innerWidth * 2 ) - 1;
            my = ( e.clientY / window.innerHeight * 2 ) - 1;
        }

        function draw() {
            post.filter.colorOffset = [mx * -0.02, 0.0, mx * 0.02];
            post.filter.mousePos = [mx * 2, my * 2];
            post.render();
            requestAnimationFrame(draw);
        }

    </script>

</head>

<body>
<script>
    setLabels("022. User stream example", "Works only in Chrome Canary with <a href='http://www.webrtc.org/running-the-demos'>MediaStream enabled</a> and in <a href='http://snapshot.opera.com/labs/camera/'>Opera Labs Camera</a>.", false);
</script>
</body>

</html> 











